/**
 * 测试UseEffect与UseLayoutEffect的执行时机
 * useEffect在dom渲染之后执行，相当于异步宏任务
 * useEffectLayout在下一次dom渲染前执行，相当于异步微任务
 */

import React, { useState } from "react";

const TestEffect: React.FC = () => {
  const [a, setA] = useState<number>(1);

  /* React.useEffect(() => {
    setA(2);
    console.log("useEffect内部", a);
  }); */

  React.useLayoutEffect(() => {
    setA(2);
    console.log("useLayoutEffect内部", a);
  }, [a]);

  Promise.resolve().then(() => console.log("promise"));
  console.log("render渲染", a);

  return (
    <>
      <h3>{a}</h3>
    </>
  );
};
export default TestEffect;
